﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayuiLayout.cshtml";
}
@section styles
{
    <link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <style>
        /*此样式让左右区域有10px的空隙*/
        .pl10 {
            padding-left: 10px !important;
        }
    </style>
}
<!-- 页面主体 -->
<div class="layui-fluid">
    <div class="layui-row">
        <!-- 树形图 -->
        <div class="layui-col-sm2">
            <div class="grid-demo grid-demo-bg1">
                <blockquote class="layui-elem-quote m0">
                    <div class="relative">
                        <span>
                            系统配置
                        </span>
                        <span class="absolute right0">
                            <span class="layui-inline">
                                <button class="layui-btn layui-btn-xs layui-btn-warm" id="btnAdd"
                                        onclick="javascript:layer_show('', '', '@Url.Action("AddOrEditType","Code")', '100%', '50%'); ">
                                    <i class="layui-icon">&#xe654;</i>添加配置
                                </button>
                            </span>
                        </span>
                    </div>
                </blockquote>
                <div class="layui-elem-quote layui-quote-nm m0 p0" style="overflow: auto;" id="tree">
                    <ul id="treeCode" class="ztree"></ul>
                </div>
            </div>
        </div>
        <input type="hidden" id="hidTypeId" />
        <input type="hidden" id="hidTypeCode" />
        <!-- 列表区域 -->
        <div class="layui-col-sm10 pl10">
            <div>
                <!-- 标题区块 -->
                <blockquote class="layui-elem-quote layui-text Table">
                    <div class="pos-r h-38" id="topbar">
                        <span>
                            @{
                                bool isHasRow; // 是否有行操作
                            }
                            @Html.SysMenuButton(MenuPosType.行列, out isHasRow)
                        </span>
                        <span class="pos-a pos-right">
                            <span class="layui-inline">
                                <button type="button" class="layui-btn" data-type="Search"><i class="layui-icon">&#xe615;</i>搜索</button>
                            </span>
                            <span class="layui-inline">
                                <button type="button" class="layui-btn" data-type="Reload"><i class="layui-icon">&#xe669;</i>刷新</button>
                            </span>
                        </span>
                    </div>
                </blockquote>

                <!-- 数据表格 -->
                <table class="layui-table" lay-data="{ method:'post',url:'@Url.Action("GetList", "Code")', id:'tbList',height:'full-128', page:false}" lay-filter="tbList">
                    <thead>
                        <tr>
                            <th lay-data="{type:'checkbox', fixed:'left', width:40}"></th>
                            <th lay-data="{field:'CodeText', width:200}">键</th>
                            <th lay-data="{field:'CodeValue', align:'center', edit:'text', width:100}">值</th>
                            <th lay-data="{field:'CodeRemark', edit:'text'}">备注</th>@*, width:200*@
                            <th lay-data="{field:'CodeType', align:'center', width:150}">类型</th>
                            <th lay-data="{field:'IsEnable', width:90, fixed:'right',align:'center', unresize:true, templet:'#IsEnableTp'}">是否启用</th>
                            <th lay-data="{field:'IsDefault', width:100, fixed:'right',align:'center', unresize:true, templet:'#IsDefaultTp'}">是否默认值</th>
                            @if (isHasRow)
                            {
                                Write(new MvcHtmlString("<th lay-data=\"{ width:120,fixed:'right',align:'center', unresize:true, toolbar:'#barOperation'}\">操作</th>"));
                            }
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 是否启用 模板 -->
<script type="text/html" id="IsEnableTp">
    <input type="checkbox" name="IsEnable" value="{{d.ID}}" lay-skin="switch"
           lay-text="启用|禁用" lay-filter="isEnable" {{ d.IsEnable == true ? 'checked' : '' }}>
</script>
<!-- 是否默认值 模板 -->
<script type="text/html" id="IsDefaultTp">
    <input type="checkbox" name="IsDefault" value="{{d.Id}}" lay-skin="switch"
           lay-text="是|否" lay-filter="isEnable" {{ d.IsDefault == true ? 'checked' : '' }}>
</script>
<!-- 搜索表单 -->
<div class="hidden" id="SearchTmpl">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">键</label>
            <div class="layui-input-block">
                <input type="text" name="CodeText" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">值</label>
            <div class="layui-input-block">
                <input type="text" name="CodeValue" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="CodeRemark" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <select name="IsEnable">
                    <option value="" selected></option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否默认值</label>
            <div class="layui-input-block">
                <select name="IsDefault">
                    <option value="" selected></option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll();">关闭</button>
        </div>
    </form>
</div>
@section scripts
{
    <script src="~/Content/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script src="~/Content/zTree_v3/js/jquery.ztree.core.js"></script>
    <script src="~/Content/zTree_v3/js/jquery.ztree.excheck.js"></script>
    <script src="~/Content/zTree_v3/js/jquery.ztree.exedit.js"></script>
    <!-- 左侧树形图设置-->
    <script>

        //初始化的设置
        var setting = {
            view: {
                addHoverDom: addHoverDom, // 用于当鼠标移动到节点上时，显示用户自定义控件，
                removeHoverDom: removeHoverDom, // 隐藏自定义控件，与 addHoverDom 同时使用
                selectedMulti: false // 设置是否允许同时选中多个节点，默认值：true
            },
            edit: {
                enable: true, // 设置 zTree 是否处于编辑状态， 默认值：false
                showRenameBtn: false,  // 设置是否显示编辑名称按钮，默认值：false
                showRemoveBtn: true // 设置是否显示删除按钮，enable = true 时生效
            },
            data: {
                key: {
                    title: 'title'
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick, // 用于捕获节点被点击的事件回调函数
                beforeRemove: beforeRemove, // 用于捕获节点被删除之前的事件回调函数
                onRemove: onRemove, // 用于捕获删除节点之后的事件回调函数
                onNodeCreated // 用于捕获节点生成 DOM 后的事件回调函数
                }
                };

        //定义 树节点数据 变量
        var zNodes =[];

        //自定义用户控件（增删改按钮）
        function addHoverDom(treeId, treeNode) {
            var aObj = $('#' +treeNode.tId + '_a');
            if ($('#diyBtn_area_' +treeNode.id).length > 0) {
                return;
            }
            var editStr =
                '<span id="diyBtn_area_' + treeNode.id + '" >'
                + '<span class="button add" id="diyBtn_Add_' + treeNode.id + '" title="添加子节点"></span>'
                + '<span class="button edit" id="diyBtn_Edit_' + treeNode.id + '" title="编辑节点"></span>'
              + '</span>';
            aObj.append(editStr);
            var btnAdd = $('#diyBtn_Add_' + treeNode.id),
                btnEdit = $('#diyBtn_Edit_' + treeNode.id);
            if (btnAdd) {
                btnAdd.bind('click', function () {
                    layer_show('', '代码类型--添加', '@Url.Action("AddOrEditType","Code")?ParentId=' + treeNode.id, '100%', '100%');
                });
            }
            if (btnEdit) {
                btnEdit.bind('click', function () {
                    layer_show('', '代码类型--修改', '@Url.Action("AddOrEditType","Code")/' + treeNode.id, '100%', '100%');
                });
            }
        };

        function removeHoverDom(treeId, treeNode) {
            $('#diyBtn_area_' + treeNode.id).unbind().remove();
        };

        function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isFirstNode;
        }

        //删除执行前 事件
        function beforeRemove(treeId, treeNode) {
            layer.confirm('确认要删除 ' + treeNode.name + ' 吗?', function (index) {
                $.post(
                    '@Url.Action("TypeDeleteList","Code")',
                    { IdList: treeNode.id },
                    function (result) {
                        layer.close(index);
                        if (result.Success) {
                            layer.msg(result.Message, { icon: 1, time: 3000 });
                            LoadTree();//刷新
                        } else {
                            layer.alert(result.Message, { icon: 2 });
                        }
                    });
            })

            return false;
        }

        function onRemove(e, treeId, treeNode) {

        }

        function onNodeCreated() {

        }

        //单击栏目事件
        function onClick(event, treeId, treeNode, clickFlag) {
            document.getElementById('hidTypeId').value = treeNode.id;
            document.getElementById('hidTypeCode').value = treeNode.title;

            //全局变量 刷新右侧页面
            getCodesByType(treeNode.title);
        }

        //文档加载完成执行
        $(document).ready(function () {
            LoadTree();
        });

        //加载树节点
        function LoadTree() {
            $.post('@Url.Action("GetTreeNodes", "Code")', function (data) {
                if (data.code == "1") {
                    zNodes = data.data;
                    var tree = $.fn.zTree.init($("#treeCode"), setting, zNodes);
                    tree.expandAll(tree);
                } else { }
            });

            $("#tree").css("height", (window.innerHeight - 82) + "px");

        }
    </script>
    <!-- 右侧表格设置-->
    <script>
        var layer;//这两个变量设置为当前页的全局变量
        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table, form = layui.form, laydate = layui.laydate;
            var $ = layui.jquery;
            layer = layui.layer;
            window.searchfield = {};//存储查询字段

            //刷新(添加修改等子页面也需要用到)
            reload = function () {
                //保存codeType值
                var codeType = searchfield.codeType;
                //先清空searchfield对象的属性值
                for (var i in searchfield) {
                    searchfield[i] = "";
                }
                //再添加codeType属性值
                searchfield.codeType = codeType;
                //刷新表格
                table.reload('tbList', {
                    where: searchfield
                });
            }

            //窗口大小被调整时触发事件
            window.onresize = function () {
                $("#tree").css("height", (window.innerHeight - 82) + "px");
            }

            //设置标题区块的按钮的事件方法
            var active = {
                Reload: function () {//刷新按钮
                    reload();
                },
                Search: function () {
                    layer_show(1, "高级检索", $("#SearchTmpl"), '400px', "100%", "r");
                    form.render();//重新渲染表单
                },
                Add: function () {
                    if ($('#hidTypeCode').val() == '') {
                        layer.msg('请选择左侧栏目分类', { icon: 2, timer: 2000 });
                    } else {
                        layer_show('', '添加', '@Url.Action("AddOrEdit", "Code")?CodeType=' + $('#hidTypeCode').val(), '100%', '100%');
                    }
                },
                Edit: function () {
                    var data = table.checkStatus('tbList').data;
                    if (CheckSingle(data.length, layer)) {
                        layer_show('', '编辑', '@Url.Action("AddOrEdit", "Code")/' + data[0].Id, '100%', '100%');
                    }
                },
                Delete: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '删除')) {
                        layer.confirm('确认要删除吗?', function (index) {
                            $.post(
                                '@Url.Action("DeleteList", "Code")',
                                { IdList: GetIdList(data) },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }
                }
            };

            //获取并拼接数据中id的值
            function GetIdList(data) {
                var IdList = "", douhao = "";
                for (var i = 0; i < data.length; i++) {
                    IdList += douhao + data[i].Id; douhao = ',';
                }
                return IdList;
            }

            //监听表头按钮点击
            $('#topbar .layui-btn').on('click', function () {
                //当按钮被单击时
                var type = $(this).data('type');//获取该按钮的type数据
                active[type] ? active[type].call(this) : '';//执行active中匹配type的方法
            });

            //监听排序
            table.on('sort(tbList)', function (obj) {
                table.reload('tbList', {
                    initSort: obj,
                    where: {
                        field: obj.field,
                        order: obj.type
                    }
                });
            });

            //监听启用开关
            form.on('switch(isEnable)', function (obj) {
                update(this.value, this.name, obj.elem.checked);
            });

            //监听单元格编辑
            table.on('edit(tbList)', function (obj) {
                update(obj.data.Id, obj.field, obj.value);
            });

            //更新字段
            function update(id, field, value) {
                $.post('@Url.Action("UpdateField", "Code")'
                    , { Id: id, field: field, value: value }
                    , function (msg) {
                        if (msg.Success == true) {
                            layer.msg(msg.Message, { icon: 1, time: 1000 });
                        } else {
                            layer.alert(msg.Message, { icon: 2 });
                        }
                    });
            }

            //监听表格 列工具条
            table.on('tool(tbList)', function (obj) {
                var data = obj.data;//获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                switch (layEvent) {
                    case "Add": {
                        layer_show('', '添加', '@Url.Action("AddOrEdit", "Code")' + '?ParentId=' + data.Id, '100%', '100%');
                    }; break;
                    case "Edit": {
                        layer_show('', '修改', '@Url.Action("AddOrEdit", "Code")/' + data.Id, '100%', '100%');
                    }; break;
                    case "Delete": {
                        layer.confirm('确认要删除吗?', function (index) {
                            $.post(
                                '@Url.Action("DeleteList", "Code")',
                                { IdList: data.Id },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }; break;
                    default: { }; break;
                }
            });

            //高级搜索提交按钮事件
            form.on('submit(search)', function (data) {
                //把这个变量存储到全局
                window.searchfield = data.field;
                //传入搜索参数并重新加载当前表格
                table.reload('tbList', {
                    where: data.field,
                    page: { curr: 1 /*重新从第 1 页开始*/ }
                });
                layer.closeAll();//关闭高级搜索框
                return false;
            });

            //左侧栏目通过该方法来刷新后边
            window.getCodesByType = function (codeType) {
                //先清空searchfield对象的属性值
                for (var i in searchfield) {
                    searchfield[i] = "";
                }
                //再添加codeType属性值
                searchfield.codeType = codeType;
                //刷新表格
                table.reload('tbList', {
                    where: searchfield,
                    //page: { curr: 1 /*重新从第 1 页开始*/ }
                });
            }
        });
    </script>
}
